<template>
  <div :id="id" class="main" :style="{width: '100%', height: '400px',}"></div>
</template>

<script>
  export default {
    name: 'StandardStorage',
    props: {
      height: {
        type: String,
        default: '300px'
      },
      text: {
        type: String,
        default: '柱状图'
      },
      itemArray: {
        type: Array,
        default: () => ['图例1', '图例2']
      },
      dataSource: {
        type: Object,
        default: () => ({
          column:[],
          values:[]
        })
      },
      description: {
        type: String,
        default: '入库数量'
      }
    },
    data() {
      return {
        myChart: '',
        id: "standardStorageId"
      }
    },
    computed: {
    },
    methods: {
      setOption() {
        let dom = 800;
        let barWidth = 40;
        let colors = []
        for(let i = 0;i<20;i++){
            colors.push({
                type: 'linear',
                x: 0,
                x2: 1,
                y: 0,
                y2: 0,
                colorStops: [
                {
                    offset: 0,
                    color: '#59B8FF' // 最左边
                }, {
                    offset: 0.5,
                    color: '#32A4FA' // 左边的右边 颜色
                }, {
                    offset: 0.5,
                    color: '#4EB3FF' // 右边的左边 颜色
                }, {
                    offset: 1,
                    color: '#72C2FF'
                }]
            })
        }
        this.myChart.setOption({
          color: ['#90cff4'],
          title: {
            text: this.text,
            x: 'center',
            show: false
          },
          xAxis: {
            type: 'category',
            data: this.dataSource.column,
            axisTick: {
              alignWithLabel: true
            },
            // x轴的字体样式
            axisLabel: {
              show: true,
              lineStyle:{
                color:'rgba(0,0,0,0.45)'
              }
            },
            // x轴的颜色和宽度
            axisLine:{
              show: true,
              lineStyle:{
                color:'rgba(0,0,0,0.45)'
              }
            },
            // axisTick: {
            //   show: false
            // },
            splitLine: {     //网格线
              show: false
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(0,0,0,0.45)'
              }
            },
            // axisTick: {
            //   show: false
            // },
            splitLine: {     //网格线
              show: false
            },
          },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          //   }
          // },
           //提示框
          tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '2%',
            right: '5%',
            bottom: '5%',
            top: '18%',
            containLabel: true
          },
          //存在多种数据才需要图例
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            data: this.itemArray,
            show: false
          },
          //多种数据时需要自定义series,每种数据对应数组中的一个值
          series: [
            {
                type: 'bar',
                barWidth: barWidth,
                barGap:"0%",
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colors[params.dataIndex % 7];
                        }
                    }
                },
                label: {
                    show: false,
                    position: [barWidth / 2, -(barWidth + 20)],
                    color: '#ffffff',
                    fontSize: 14,
                    fontStyle: 'bold',
                    align: 'center',
                },
                data: this.dataSource.values
            },
            {
                z: 2,
                type: 'pictorialBar',
                data: this.dataSource.values,
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colors[params.dataIndex % 7];
                        },
                    }
                },
            },
            {
                z: 3,
                type: 'pictorialBar',
                symbolPosition: 'end',
                data: this.dataSource.values,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [barWidth-4, (10*(barWidth-4))/barWidth],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: '#59B8FF'
                    }
                },
            }
          //   {
          //   name: this.description,
          //   type: 'bar',
          //   barWidth: '60%',
          //   label: {
          //     normal: {
          //       show: false,     //柱状显示数据
          //       position: 'outside'
          //     }
          //   },
          //   data: this.dataSource.values,
          // }
          ]
        })
      },
      //初始化
      initEcharts() {
        let echarts = require("echarts");
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById(this.id), "light");
        // 绘制图表
        this.setOption();
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }
    },
    mounted() {
    },
    watch: {
      dataSource: function () {
        this.setOption()
      }
    }
  }
</script>
